<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="lib/jquery.tools.js"></script>	
		<script type="text/javascript" src="lib/jquery.custom.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="main">
<!-- header begins -->
<div id="header">
	<div id="logo">
    	<a href="#">metamorph_melancholy</a>
      	<h2><a href="#" id="metamorph">Small Company Slogan Goes Here</a></h2>
    </div>
    <div id="buttons">
      <a href="index.html" class="but"  title="">Home</a>
      <a href="about_us.html" class="but" title="">About Us</a>
      <a href="gallery.html"  class="but" title="">Gallery</a>
      <a href="blog.html"  class="but" title="">Blog</a>
      <a href="contact_us.html" class="but" title="">Contact us</a>
    </div>
</div>
<!-- header ends -->

<!-- content begins --> 

  <div id="content">
    	
			<div class="scrollable">
				<div class="items">
					<div class="item">
						<div class="header1"></div>                                    
					</div> <!-- item -->
					<div class="item">
					    <div class="header2"></div>						
					</div> <!-- item -->
					<div class="item">
					    <div class="header3"></div>						
					</div> <!-- item -->			
											
					
				</div> <!-- items -->
			</div> <!-- scrollable -->
			<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->		   
			  
                <div style="clear: both"></div>
			
		
            
        <div style="height:10px"></div>
        <div class="content_razd">
        	<div  id="left">
            	<a href="#" class="a_h1">Lorem Ipsum Dolor Sit Amet</a>
                <div style="height:5px"></div>
                <div class="datc_comment">
                  <div class="datc"><img src="images/fish_dat.gif" style=" vertical-align:middle" alt="" />&nbsp;&nbsp;<a href="#">Sep 23, 2010</a></div>
                    <div class="bloger"><img src="images/fish_bloger.gif" style=" vertical-align:middle" alt="" />&nbsp;&nbsp;<a href="#">by John Johnson</a></div>
                    <div class="comment"><img src="images/fish_comment.gif" style=" vertical-align:middle" alt="" />&nbsp;&nbsp;<a href="#">12 Comments </a></div>
               </div>
               <img src="images/img41.jpg" alt="" /><br />
              <div style="height:10px"></div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis urna sit amet ligula tristique egestas at ut turpis. Praesent tempus lorem in sapien vehicula sit amet iaculis augue aliquet.
            	<div style="height:40px"></div>
                <a href="#" class="a_h1">Vivamus Ac Arcu Sapien</a>
              <div style="height:5px"></div>
                <div class="datc_comment">
                  <div class="datc"><img src="images/fish_dat.gif" style=" vertical-align:middle" alt="" />&nbsp;&nbsp;<a href="#">Sep 24, 2010</a></div>
                    <div class="bloger"><img src="images/fish_bloger.gif" style=" vertical-align:middle" alt="" />&nbsp;&nbsp;<a href="#">by John Johnson</a></div>
                    <div class="comment"><img src="images/fish_comment.gif" style=" vertical-align:middle" alt="" />&nbsp;&nbsp;<a href="#">14 Comments </a></div>
               </div>
            	Vivamus ac arcu sapien. Vestibulum eros lorem, tempus tristique gravida vitae, imperdiet vel ante. Ut ut tellus dolor. Mauris eu odio non ipsum porttitor varius. Aliquam eget erat convallis justo semper rhoncus. <br /><br />
				Curabitur rutrum varius odio, elementum aliquet dui ornare et. Proin semper viverra turpis sit amet dignissim. Quisque a augue purus. Donec vel lorem quam, eget molestie lacus. Nam quis vehicula risus. 
            
       	  </div>
      <div  id="right">
            	<h1>Categories</h1>
        <div style="height: 5px;"></div> 
                <ul class="spis2">
                    <li><a href="#">In ultrices libero</a></li>
                    <li><a href="#">Quisque dignissim</a></li>
                    <li><a href="#">Donec semper nunc ac velit</a></li>
                </ul>
                <div style="height: 45px;"></div>
              	<h1>Archives</h1>
        <div style="height: 5px;"></div> 
        <ul class="spis2">
                    <li><a href="#">January  2010</a></li>
                    <li><a href="#">February  2010</a></li>
                    <li><a href="#">March  2010</a></li>
        </ul>
                <div style="height: 45px;"></div>
                <h1>Meta</h1>
        <div style="height: 5px;"></div> 
        <ul class="spis2">
                    <li><a href="#">Log in</a></li>
                    <li><a href="#">Valid XHTML</a></li>
                    <li><a href="#">XFN</a></li>
                    <li><a href="#">WordPress</a></li>
        </ul>
        <div style="height: 5px;"></div>
            </div>
       	  <div style="clear: both;"></div>  
        </div>
            
        <div style="clear: both; height: 12px;"></div>                  
  </div>
        <!-- content ends -->
<div style="height: 7px;"></div> 
        <!-- bottom begin -->
<div class="cont_top"></div>
    <div id="bottom">
    <div class="bottom_h2">	
    <div class="bottom_razd">   
        <div class="b_col1">
            <h2>Contact Information</h2>
            <div style="height:25px"></div>
            <b>Suspendisse rutrum interdum lacinia.</b> Suspendisse tempus aliquet elit sit amet pellen- tesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. Morbi id magna ac tortor <br />
            <br />
            <b>Quisque luctus, mi ornare</b> Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo    
      </div>
        <div class="b_col2">
            <h2>Share with Others</h2>
            <div style="height:25px"></div>
            <ul>
                <li><img src="images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
                <li><img src="images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
                <li><img src="images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
                <li><img src="images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
            </ul>
        </div>
      <div class="b_col3">
            <h2>Useful Resources</h2>
            <div style="height:25px"></div>
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas in turpis </a></li>
                <li><a href="#">Morbi fringilla libero</a></li>
                <li><a href="#">In venenatis metus vel </a></li>
                <li><a href="#">Donec cursus quam ac </a></li>
            </ul>
      </div> 
      <div style="clear: both; height:1px;"></div>
    </div>  
    </div>
    </div>
 
    
<!-- bottom end --> 
<!-- footer begins -->
            <div id="footer">
          Copyright  2011. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a><br />
                <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></div>
        <!-- footer ends -->
</div>



</body>
</html>
